$(function(){
  var clientWidth =  document.body.clientWidth;
	   //设置图片的宽高
  var  imageWidth = 110,
       imageHeight = 160,
       ///定义数组储存show 中的图片
       showArr = ['introduce-1.jpg','introduce-2.jpg','introduce-3.jpg','introduce-4.jpg','introduce-5.jpg','introduce-6.jpg','introduce-7.jpg'
       ];
       imageArr = {};
       //图片流1
/*       imageArr[0] = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg'];
       //图片流1
       imageArr[1] = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg'];
       //图片流1
       imageArr[2] = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg'];*/
      //设置li1的宽度，自适应图片数量;
      //封装动画函数
  
  var toMove = (obj, target, speed)=>{
  	   obj.css({
  	    	'margin-left':'0px'
  	    })
        obj.animate({
        	'margin-left':target
        },speed*imageArr[0].length,'linear',()=>{
        	toMove(obj, target, speed);
        })
       };

  
  function toStream(_item){

  	let item = _item > 0 ? _item : _item*-1;
  	let speed = 300/Math.pow(item,1/3);
  	let flag = _item/item;



  
  	   for(let i = objAttr.length-2;i > 0;i-- ){
       /*data[i+flag]['transition'] = `all ${speed}ms linear`*/
       objAttr[i].css(data[i+flag]);	  			
       	if(i === 1){
       setTimeout(function(){
             
       		//////////重置区域
       	
       			var len2 = VisualArr.length;
       			var len3 = unVisualArr.length;
       			//数组处理图片数据关键

if(flag == 1){
	          VisualArr.unshift(unVisualArr[len3-1]);

       			unVisualArr.pop();	
       			       			unVisualArr.unshift(VisualArr[len2]);
       		
       			VisualArr.pop();
       }
      else if(flag == -1){
     /////////// unVisualArr[0]变为了VisualArr[len2-1]
          	unVisualArr.push(VisualArr[0]);
     		   	VisualArr.shift();
   		    	VisualArr.push(unVisualArr[0]);
      			unVisualArr.shift();
      }
       		
/*       	    	console.log(VisualArr);
       	    	console.log(unVisualArr);
       	  		console.log(111111111111111);*/
       	
       	         	//还原left值
       	  	  		//重置stream
					console.log(data);
					var firstimg = objAttr[0].attr('index-img')
						console.log(firstimg);
       	  	for(var j = 0; j < VisualArr.length; j++){
       	  		   data[j]['transition'] = '';
       	  			 objAttr[j].css(data[j]);
       	  		objAttr[j].attr('src', `assets/img/banner-img/${VisualArr[j]}`);
       	  		if(j == VisualArr.length-1){
       	  		var indexattr=firstimg;
       	  		}else{
       	  		var indexattr = objAttr[j+1].attr('index-img');       	  			
       	  		}
       	  		objAttr[j].attr('index-img', indexattr);
       	  	}

       		
       			//////////重置区域
       	},speed)
       }
   
  	}
       }  
       
       
     //绘制上方的3个图片流
/*       for( var index in imageArr){
       	var flag =parseInt(index) + 1;
       
       	 $('#li' + flag).css({
        	'width':imageArr[index].length*imageWidth+'px'
        })
         for(var i = 0; i < imageArr[index].length; i++)
       {
      	 $('#li' + flag).html(	 $('#li' + flag).html()+`<img src='assets/img/banner-img/${imageArr[index][i]}' class = 'img1'/>`);
       }
       }*/
       
       
       //绘制下面的图片流
       var len = showArr.length;
       var VisualArr = [showArr[parseInt(len/2)]], unVisualArr=[];
       const width1 = 250, height1 = 350, addHeight = 35, addWidth = 25;
       const middleLeft = (clientWidth - width1)/2;//宽高比例 5:7
       var left1,left2,width2,height2;//变量储存左右两侧left值的变化
       //中间
       
       	$('#fantastic').html(	$('#fantastic').html() + `<img src='assets/img/banner-img/${showArr[parseInt(len/2)]}' style = 'filter: brightness(100%);width:${250}px;height:${height1}px;left:${middleLeft}px;z-index:${(showArr.length)*10};'class="left" />`)
       
      /* for(var i = 0;i < showArr.length; i++){
       	$('#fantastic').html(	$('#fantastic').html() + `<img src='assets/img/banner-img/${showArr[i]}' style = 'width:${i*30+150}px;height:${i*40+200}px;left:${i*(120+i*10)}px;' />`)
       }
       */
       width2=width1;
       left1=middleLeft;
       left2= middleLeft;
       
       /////动态生成最初的图片流stream
       for(var i = 0;i < parseInt(showArr.length/2); i++){
      
       left1 = left1 - width2*2/3;
       left2 = left2 + width2*2/3 + addWidth;
       width2 = width1 - (i+1)*addWidth;
       height2 = height1 - (i+1)*addHeight;
       //左边
      
       if(left1 + width2<=-200){//左边不可见的
       	 unVisualArr.push(showArr[i]);
       }
       else{
       	$('#fantastic').html(	$('#fantastic').html() + `<img src='assets/img/banner-img/${showArr[i]}' style = 'filter: brightness(${60-i*5}%); transform: perspective(600px) rotateY(-${i*8}deg);width:${width2}px;height:${height2}px;left:${left1}px;z-index:${(showArr.length - i-1)*10};'class="left" />`);
       
        VisualArr.unshift(showArr[i]);
       }
       	//右边
       	 
       	if(left2 + width2 <= clientWidth+200){
       		$('#fantastic').html(	$('#fantastic').html() + `<img src='assets/img/banner-img/${showArr[showArr.length - 1- i]}' style = 'filter: brightness(${60-i*5}%); transform: perspective(600px) rotateY(${i*8}deg);width:${width2}px;height:${height2}px;left:${left2}px;z-index:${(showArr.length - i-1)*10};' class="right"/>`)
        VisualArr.push(showArr[showArr.length - 1- i]);
       	}
       	else{
       unVisualArr.unshift(showArr[showArr.length - 1- i]);
       	}
       	
       }

      //整理流，将其视为一个从左至右的顺序
      var objAttr = [];
      var objCenter = $('.left').eq(0);
       $('.left').each(function(index,item){
      
       objAttr.unshift($(item));
       })
       $('.right').each(function(index,item){
       	      
       objAttr.push($(item));
       })
    //存储最初创建的obj的css数据
    var data = [];
    for(var i = 0; i < VisualArr.length; i++){
    	//
      //索引值：
       var imgindex =  objAttr[i].attr('src').split(".")
      objAttr[i].attr('index-img',imgindex[0].charAt(imgindex[0].length-1));
      
      objAttr[i].attr('index', i);
    	 let json = {
    	 		'left':objAttr[i].css('left'),
       		'width':objAttr[i].css('width'),
       		'height':objAttr[i].css('height'),
       		'z-index':objAttr[i].css('z-index'),
       		'transform':objAttr[i].css('transform'),
       		'filter':objAttr[i].css('filter'),
    	 }
    	 data.push(json);
    }


       //启动动画  哲学 **开关
/*       toMove($('#li1'),`${clientWidth - imageArr[0].length*imageWidth}px`, 1000);
       toMove($('#li2'),`${clientWidth - imageArr[1].length*imageWidth}px`, 800);
       toMove($('#li3'),`${clientWidth - imageArr[2].length*imageWidth}px`, 1200);*/
 
     var  timer = setInterval(function(){
     	introduce();
       	toStream(-2);
       },3600)
             
  
       //暂停动画 stop
       $('#fantastic img')
       .on('mouseover',function(){
       clearInterval(timer);
        
       })
       .on('mouseout',function(){
        timer = setInterval(function(){
        introduce();
       	toStream(-2);
       },3600)
             
       })
        .on('click',clickStream)
        
       function clickStream(){
      	$("#fantastic img").unbind('click')
        	clearInterval(timer);
        	
        	clearInterval(timer2);
       var _times =objCenter.attr('index')-$(this).attr('index');
       var t1 = 0;
       var times = _times>0?_times:-_times;
       var  timer2 = setInterval(function(){
       	toStream(_times);
       	t1++;
       	if(t1>=times){
       		clearInterval(timer2);
       		setTimeout(function(){
       			$('#fantastic img').on('click', clickStream);
       		},200)
       	}
       },400/Math.pow(times,1/3))
        }
/*       console.log(VisualArr);
       console.log(unVisualArr);*/
})
